<template>
  <el-dialog
    :title="title"
    :visible.sync="selfVisible"
    custom-class="add-question-dialog"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <!-- <div class="topic">
      <div class="item">
        <p>题目名称</p>
        <el-input v-model="name" placeholder="请输入题目名称"></el-input>
      </div>
      <div class="item">
        <p>因子</p>
        <el-select v-model="factor"></el-select>
      </div>
    </div> -->

    <avue-form v-model="form" :option="formOption" @submit="handleSubmit">
      <template slot-scope="scope" slot="adds">
        <!-- @row-save="rowSave" -->
        <!-- @row-update="rowUpdate" -->
        <!-- @row-click="handleRowClick" -->
        <avue-crud
          ref="crud"
          :data="form.adds"
          :option="option"
          @row-del="rowDel"
        >
          <template slot-scope="scope" slot="menuLeft">
            <el-button
              type="primary"
              size="small"
              icon="el-icon-plus"
              @click.stop="addOption(scope)"
              >新增选项</el-button
            >
          </template>
          <template slot-scope="scope" slot="answer">
            <el-input v-model="scope.row.answer"></el-input>
          </template>
          <template slot-scope="scope" slot="score">
            <el-input v-model="scope.row.score"></el-input>
          </template>
        </avue-crud>
      </template>
    </avue-form>
  </el-dialog>
</template>

<script>
import { saveTopic, getTopic, updateTopic } from "@/api/scale";
import { cloneDeep } from "lodash-es";

export default {
  name: "AddQuestionDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    gaugeId: {
      type: String,
      default: "",
    },
    gaugeSubjectId: {
      type: String,
      default: "",
    },
    question: {
      type: Object,
      default: () => null,
    },
    questionList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      option: {
        page: false,
        align: "left",
        refreshBtn: false,
        // dialogType: "drawer",
        dialogWidth: 800,
        delBtn: true,
        addBtn: false,
        editBtn: false,
        column: [
          {
            label: "选项内容",
            prop: "answer",
            type: "textarea",
            span: 24,
            slot: true,
            rules: [
              {
                required: true,
                message: "请输入选项内容",
                trigger: "blur",
              },
            ],
          },
          {
            label: "选项分值",
            prop: "score",
            type: "number",
            slot: true,
            rules: [
              {
                required: true,
                message: "请输入选项分值",
                trigger: "blur",
              },
            ],
          },
        ],
      },
      formOption: {
        labelWidth: 120,
        editBtn: false,
        column: [
          {
            label: "题目名称",
            prop: "subjecName",
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入题目名称",
                trigger: "blur",
              },
            ],
          },
          // {
          //   label: "因子",
          //   prop: "factor",
          //   rules: [
          //     {
          //       required: true,
          //       message: "请输入因子",
          //       trigger: "blur"
          //     }
          //   ]
          // },
          {
            label: "选项",
            prop: "adds",
            formslot: true,
            labelslot: true,
            errorslot: true,
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入选项",
                trigger: "blur",
              },
            ],
          },
        ],
      },
      form: {
        subjecName: "",
        adds: [],
        subjectNo: 1,
      },
    };
  },
  computed: {
    editMode() {
      return !!this.question;
    },
    selfVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
    title() {
      return this.editMode ? "编辑题目" : "添加题目";
    },
  },
  watch: {
    // async gaugeSubjectId(val) {
    //   if (val) {
    //     const {
    //       data: { data }
    //     } = await getTopic({ id: val });
    //     this.form = data;
    //   }
    // }
    question(val) {
      this.form = cloneDeep(this.question);
    },
  },
  methods: {
    addOption() {
      this.form.adds.push({ name: "", score: 0 });
    },
    handleAdd() {},
    handleAddAnswer() {
      this.form.adds.push({ name: "", score: 0 });
    },
    handleRowClick(row, event, column) {
      this.$refs.crud.rowEdit(row, row.$index);
    },
    async rowSave(form, done, loading) {
      loading();
      done(form);
    },
    async rowUpdate(form, index, done, loading) {
      loading();
      done(form);
    },
    rowDel(form) {
      this.form.adds.splice(form.$index, 1);
    },
    async handleSubmit(form, done) {
      form.gaugeId = this.gaugeId;

      form.adds.forEach((item, index) => {
        item.gaugeId = this.gaugeId;
        item.subjectAnswerNo = index + 1;
      });

      if (form.subjectNo < 1 || !form.subjectNo) {
        const index = this.questionList.findIndex(
          ({ gaugeSubjectId }) => gaugeSubjectId === form.gaugeSubjectId
        );
        form.subjectNo = index >= 0 ? index + 1 : this.questionList.length + 1;
      }

      let post = this.editMode ? updateTopic : saveTopic;
      await post(form);
      if (this.editMode) {
        this.selfVisible = false;
      } else {
        this.form.subjecName = "";
        this.form.subjectNo++;
        this.$message.success("添加成功!");
      }
      // this.selfVisible = false;
      done();
    },
  },
};
</script>

<style lang="scss" scoped>
.add-question-dialog {
}
.topic {
  border-bottom: 1px solid #ccc;
  padding-bottom: 24px;
  display: flex;
  justify-content: space-between;
  .item {
    display: flex;
    justify-content: space-between;
    p {
      width: 100px;
    }
  }
}

.buttons {
  position: fixed;
  bottom: 6px;
  right: 6px;
  left: 240px;
  text-align: right;
}

.container {
  margin-bottom: 80px;
}
</style>
